<template>
  <div class="index_container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div style="width: 100%; height: 100px; background-color: #fff; line-height: 50px; text-align: center; padding-top: 10px;">
          <i class="iconfont icon-fangwen" style="font-size: 40px; margin: 20px; color: #008800;"></i>
          <span style="font-size: 30px; font-weight: 700; margin: 20px; color: #008800;">2442万</span>
          <div style="margin-top: -10px; padding-left: 30px;">周访问量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; height: 100px; background-color: #fff; line-height: 50px; text-align: center; padding-top: 10px;">
          <i class="iconfont icon-fangwenliang" style="font-size: 40px; margin: 20px; color: plum"></i>
          <span style="font-size: 30px; font-weight: 700; margin: 20px; color: plum">23542万</span>
          <div style="margin-top: -10px; padding-left: 30px;">总计访问量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; height: 100px; background-color: #fff; line-height: 50px; text-align: center; padding-top: 10px;">
          <i class="iconfont icon-xiazai" style="font-size: 40px; margin: 20px 5px; color: skyblue;"></i>
          <span style="font-size: 30px; font-weight: 700; color: skyblue;">22442万</span>
          <div style="margin-top: -10px; padding-left: 30px;">月下载量</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="width: 100%; height: 100px; background-color: #fff; line-height: 50px; text-align: center; padding-top: 10px;">
          <i class="iconfont icon-dianzan1" style="font-size: 40px; margin: 20px; color: yellow;"></i>
          <span style="font-size: 30px; font-weight: 700; margin: 20px; color: yellow;">1442万</span>
          <div style="margin-top: -10px; padding-left: 30px;">周点赞量</div>
        </div>
      </el-col>
    </el-row>
    <el-row><div id="chartid" style="height: 450px;"></div></el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      name: '',
      chartLine: null, // 图表
      data: [12121, 213123, 4522, 34562, 34562, 23124, 45231]
    }
  },
  async mounted () {
    this.initMarketLine('chartid', this.data)
  },
  methods: {
    initMarketLine (chartid, data) {
      console.log('绘制图表')
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{c0}w'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        toolbox: {
          feature: {}
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2019-5-15', '2019-5-15', '2019-5-15', '2019-5-15', '2019-5-15', '2019-5-15', '2019-5-15']
        },
        yAxis: {
          name: '周数据',
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
          },
          show: true,
          splitLine: {
            show: true
          },
          axisLine: {
            lineStyle: {
              width: 0
            }
          }
        },
        series: [
          {
            type: 'line',
            stack: '总量',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#3295D9'
              }
            },
            data: data
          }
        ]
      }
      this.chartLine = echarts.init(document.getElementById(chartid))
      this.chartLine.setOption(option, true)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.index_container {
  margin-top: 20px;
}
</style>
